<template>
  <el-card shadow="never">
    <div slot="header">
      <span class="flex justify-between">
        <span class="text-sm">{{ title }}</span>
        <el-tag type="danger" effect="plain">
          {{ tip }}
        </el-tag>
      </span>
    </div>
    <el-row :gutter="20">
      <el-col
        :span="6"
        :offset="0"
        class="mt-5"
        v-for="(btn, index) in btns"
        ::key="index"
      >
        <el-card shadow="hover" class="border-0 bg-light-400">
          <div class="flex items-center justify-between flex-col">
            <span class="text-xl mb-2">{{ btn.value }}</span>
            <span class="text-xs text-gray-500">{{ btn.label }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
  defineProps({
    title: String,
    tip: String,
    btns: Array,
  })
</script>
